<template>
	<view class="address">
		<view class="address-card">
			<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx'" :padding="0" >
				<view class="input" >
				<uni-forms ref="valiForm" :recruits="rules" :modelValue="valiFormData">
					<uni-forms-item label="开户行" required name="bankname">
						<picker @change="bankChange" :value="index" :range="bankData" range-key="bankname">
							<view class="uni-input" :class="index >= 0?'':'uni-input1'">
								{{index >= 0?bankData[index].bankname:'请选择开户行'}}
								<uni-icons class="list-iocn" type="right" color="rgba(0,0,0,0.5)" size="22r"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="银行卡号" required name="number">
						<uni-easyinput style="width: 100%;" :clearable="false" type="number" :inputBorder="false" v-model="valiFormData.number" placeholder="请输入银行卡号" trim="both"/>
					</uni-forms-item>
					<uni-forms-item label="bank_code" required name="bank_code" style="display: none;">
						<uni-easyinput style="width: 100%;" :clearable="false" :inputBorder="false" v-model="valiFormData.bank_code" placeholder="请输入bank_code" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="bank_code" required name="bankimage" style="display: none;">
						<uni-easyinput style="width: 100%;" :clearable="false" :inputBorder="false" v-model="valiFormData.bankimage" placeholder="请输入银行卡logo" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="默认卡片" required name="curruct" style="display: none;">
						<uni-easyinput style="width: 100%;" :clearable="false" :inputBorder="false" v-model="valiFormData.curruct" placeholder="请选择默认卡片" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="id" required name="id" style="display: none;">
						<uni-easyinput style="width: 100%;" :clearable="false" :inputBorder="false" v-model="valiFormData.id" placeholder="id" trim="both" />
					</uni-forms-item>
				</uni-forms>
				</view>
			</uni-card>
			<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="0" >
				<view class="u-list">
					<text class="text">默认卡片</text>
					<switch :checked="valiFormData.curruct" @change="switchClick" />
				</view>
			</uni-card>
		</view>
		<view class="address-but">
			<button v-if="id != ''" class="but but1" plain @click="delClick">删除</button>
			<button class="but" plain @click="addClick('valiForm')">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				id:'', // 银行卡的id
				value:'', //  银行卡输入框的值
				index:-1,
				bankData:[],
				// 校验表单数据
				valiFormData: {
					bank_code:'',
					bankname: '', // 开户行
					number:'', // 银行卡号 
					curruct: 0, // 默认卡片   0是非默认  1默认
					bankimage:'', // 银行卡logo
				},
				// 校验规则
				rules: {
					bankname: {
						recruits: [{
							required: true,
							errorMessage: '开户行不能为空'
						}]
					},
					number: {
						recruits: [{
							required: true,
							errorMessage: '银行卡号不能为空'
						},
						{
							minLength: 15,
							maxLength: 19,
							errorMessage: '银行卡必须为15-19位数字',
						}]
					},
				},
			};
		},
		onReady() {
			let _this = this;
			uni.setNavigationBarTitle({
			    title: _this.id?'修改银行卡':'添加银行卡'
			});
		},
		onShow() {
			
		},
		onLoad(option) {
			this.getBank()
			if(option.id) {
				this.id = option.id
				this.getData(option.id)
			} 
		},
		methods:{
			/**
			 * 选择开户行
			 * @param {Object} e
			 */
			bankChange(e) {
				console.log(e)
				this.index = e.detail.value
				this.valiFormData.bank_code = this.bankData[this.index].bank_code
				this.valiFormData.bankname = this.bankData[this.index].bankname
				this.valiFormData.bankimage = this.bankData[this.index].icon
				
			},
			/**
			 * 删除操作
			 */
			async delClick() {
				try {
					uni.showLoading({
					       title: '删除中...',
					       mask: true
					      })
					let data = await this.$http.post('/index/Cleanerindex/del_bank',{id:this.id})
					// 返回到列表页
					uni.navigateBack({
					    delta: 1
					});
					uni.hideLoading()
				} catch (err) {
					uni.hideLoading()
					uni.showToast({
						title: err.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 提交按钮
			 * @param {string} ref 表单实例
			 */
			async addClick(ref) {
				let _this = this
				uni.showLoading({
				       title: '添加中...',
				       mask: true
				      })
				try {
					let res = await this.$refs[ref].validate()
					if(res.id) {
						let data = await this.$http.post('/index/Cleanerindex/edit_bank',res)
					} else{
						let data = await this.$http.post('/index/Cleanerindex/add_bank',res)
					}
					// 返回到列表页
					uni.navigateBack({
					    delta: 1
					});
					uni.hideLoading()
				}catch (err) {
					uni.hideLoading()
					if(err.statusCode == undefined) {
						uni.showToast({
							title: err[0].errorMessage,
							icon:"none"
						})
					} else if(err.errMsg){
						uni.showToast({
							title: err.errMsg,
							icon:"none"
						})
					}
				}
			},
			/**
			 * 默认卡片开关
			 * @param {Object} e 开关发生变化时的数据
			 */
			switchClick(e) {
				this.valiFormData.curruct = e.detail.value?1:0
			},
			/**
			 * 获取卡片信息
			 * @param {string} id 银行卡的id
			 */
			async getData(id) {
				try{
					let res = await this.$http.get('/index/Cleanerindex/bank_info',{
						bank_id:id
					})
					this.valiFormData = res
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 获取开户行数据
			 * @param {string} id 银行卡的id
			 */
			async getBank() {
				try{
					let res = await this.$http.get('/index/Communal/bank_list')
					this.bankData = res
					// this.valiFormData.bank_code = res[this.index].bank_code
					// this.valiFormData.bankname = res[this.index].bankname
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.address {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	.input-placeholder {
		font-size: 24rpx;
		color: rgba($color: #000000, $alpha: 0.5);
	}
	.address-card {
		flex: 1;
		overflow: auto;
		margin-bottom: 20rpx;
		.uni-card {
			border-radius: 20rpx;
			overflow: visible;
			.uni-card__header {
				padding: 6rpx 0;
			}
			.input {
				padding: 20rpx 20rpx;
				.uni-input {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}
				.uni-input1 {
					font-size: 24rpx;
					color: rgba($color: #000000, $alpha: 0.5);
					font-weight: 300;
				}
				.text-box {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
				.label-text {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba($color: #000000, $alpha: 0.7);
				}
				.uni-forms-item__inner {
					// padding: 0;
					.uni-forms-item__content {
						display: flex;
						flex-direction: row-reverse;
						align-items: center;
					}
				}
				.uni-input {
					line-height: 36px;
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
				.uni-input1 {
					font-weight: 400;
					color: rgba($color: #000000, $alpha: 0.7);
				}
				.uni-easyinput__content-input, .uni-combox__input {
					text-align: right;
				}
				.uni-easyinput__placeholder-class {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba($color: #000000, $alpha: 0.3);
				}
				.input-address {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba($color: #000000, $alpha: 0.7);
					
				}
				.input-address1 {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
			}
			.text {
				line-height: 48rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba($color: #000000, $alpha: 0.7);
			}
			.text3 {
				color: #000000;
			}
			.u-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.uni-data-checklist {
					margin-left: 40rpx;
					.checklist-group {
						justify-content: space-between;
					
						.checklist-box {
							box-sizing: border-box;
							border: 1px solid #f5f5f5;
							border-radius: 27rpx;
							height: 54rpx;
							background: #F2F2F2!important;
							padding: 0 20rpx;
							margin-right: 20rpx;
						}
					
						.is-checked {
							border: 1px solid #8dc9f1;
							background: #E8F9F1!important;
						}
					
						.checklist-content {
							justify-content: center;
					
							.checklist-text {
								font-size: 24rpx;
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}
	.address-but {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80rpx;
		margin-bottom: 40rpx;
		.but {
			flex: 1;
			color: #FFFFFF;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			border-radius: 40rpx;
			line-height: 80rpx;
			border: 0;
			margin: 0 20rpx;
		}
		.but1 {
			color: #000000;
			background: linear-gradient(-90deg, #ffffff, #ffffff);
		}
	}
}
</style>
